<template>
  <div id="electronicPayslip" class="cardPage">
    <div class="pageHead">
      <el-form ref="headParams" :model="headParams" class="headParams">
        <el-form-item>
          <el-date-picker v-model="headParams.date" :clearable="false" type="year" value-format="yyyy" placeholder="选择年份" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="pageMain">
      <!-- 如果当前年份monthlyList没数据，显示前往 -->
      <el-card class="thisMonth" v-if="monthlyList.length == 0 && recordDate == new Date().getFullYear()">
        <div slot="header">
          <span>本月</span>
        </div>
        <p class="tip">工资表暂未生成，请<el-link type="primary" @click="handleToPayroll" :underline="false">前往</el-link>生成</p>
      </el-card>

      <!-- 非当年数据，没数据，显示暂无数据 -->
      <p class="nullTip" v-else-if="monthlyList.length == 0 && recordDate != new Date().getFullYear()">暂无数据</p>
      <div class="monthlyList" v-else>
        <!-- 如果当前年份有其他月数据，当前月份数据不存在 monthlyList中显示 前往-->
        <el-card class="thisMonth" v-if="monthlyList.findIndex(e => e.monthNumber == 9) !== -1 && recordDate == new Date().getFullYear()">
          <div slot="header">
            <span>本月</span>
          </div>
          <p class="tip">工资表暂未生成，请<el-link type="primary" @click="handleToPayroll" :underline="false">前往</el-link>生成</p>
        </el-card>
        <el-card class="monthlyItem" :header="getItemHeader(item[0])" v-for="(item) in monthlyList" :key="item[0].id">
          <!-- <p class="tip" v-if="false">工资表暂未生成，请<el-link type="primary" :underline="false" @click="handleToPayroll">前往</el-link>生成</p> -->
          <template>
            <div class="infoItem" v-for="info in item" :key="info.id">
              <div class="baseInfo">
                <p class="name">{{info.wagesName}}</p>
                <!-- <p class="log">
                  <span>{{'红云'}}&nbsp;</span>
                  <span>创建于&nbsp;{{'2022-04-07 09:32'}}</span>
                </p> -->
              </div>
              <div class="statisticsInfo">
                <p>
                  <span>总人数</span>
                  <span>{{info.totalPeopleNumber== 0 ? '--' : info.totalPeopleNumber + '人'}}</span>
                </p>
                <p>
                  <span>已发放</span>
                  <span>{{info.peopleNumber == 0 ? '--' : info.peopleNumber + '人'}}</span>
                </p>
                <p>
                  <span>已查看</span>
                  <span>{{info.checkNumber == 0 ? '--' : info.checkNumber + '人'}}</span>
                </p>
                <!-- <p>
                  <span>已确认</span>
                  <span>{{info.confirmNumber == 0 ? '--' : info.confirmNumber + '人'}}</span>
                </p>
                <p>
                  <span>异议反馈</span>
                  <span>{{info.feedbackNumber == 0 ? '--' : info.feedbackNumber + '人'}}</span>
                </p> -->
              </div>
              <div class="btnList">
                <el-button type="text" @click="handleGrant(info)">发放工资条</el-button>
                <el-button type="text" @click="handleToDetails(info)">发放详情</el-button>
                <el-button type="text" v-if="info.sendStatus == 1" @click="handleRevoke(info)">撤销发放</el-button>
                <!-- <el-button type="text">发放记录</el-button> (暂时去掉) -->
              </div>
            </div>
          </template>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'electronicPayslip',
  data() {
    return {
      headParams: {
        date: String(new Date().getFullYear()),
      },
      monthlyList: [],
      recordDate: String(new Date().getFullYear()), // 用于记录当前列表的年份，在查询成功时更新（防止切换年份导致列表显示变化）
    };
  },
  methods: {
    searchDataList() {
      if (!this.headParams.date) {
        return this.$message.warning('请选择年份');
      }
      const data = {
        yearNumber: this.headParams.date ? parseInt(this.headParams.date) : new Date().getFullYear(),
        pageIndex: 1,
        pageSize: 10
      };
      this.$api.electronicPayslip
        .GetPaySlipList(data)
        .then(res => {
          if (res.data.status == 200) {
            this.recordDate = this.headParams.date;
            if (!res.data.data) {
              this.monthlyList = [];
              return this.$message.warning(res.data.message);
            }
            this.monthlyList = this.formatData(res.data.data);
          }
        });

    },

    /**
     * @description 对列表数据结构进行调整，同月数据存入一个数组
     */
    formatData(list) {
      let arr = [];
      let arrMap = new Map();
      list.map(e => {
        if (arrMap.has(e.monthNumber)) {
          arrMap.set(e.monthNumber, [...arrMap.get(e.monthNumber), e]);
        } else {
          arrMap.set(e.monthNumber, [e]);
        }
      });
      arrMap.forEach((value, key) => {
        arr = [...arr, value];
      });
      return arr;
    },
    getItemHeader(item) {
      const nowMonth = new Date().getMonth() + 1;
      if (item.monthNumber == nowMonth) return '本月';
      return item.monthNumber + '月';
    },
    cancelIssuePayslip(payslipId) {
      this.$api.electronicPayslip
        .CancelIssuePayslip({ payslipId })
        .then(res => {
          if (res.data.status == 200) {
            this.$message.success(res.data.message);
            this.searchDataList();
          } else {
            this.$message.warning(res.data.message);
          }
        });
    },
    
    handleSearch() {
      this.searchDataList();
    },

    /**
     * @description 发放工资条
     */
    handleGrant(info) {
      this.$router.push({
        path: '/grantPayslip',
        query: {
          month: info.monthNumber,
          year: this.headParams.date ? this.headParams.date : new Date().getFullYear(),
          wagesId: info.wagesId,
          tempId: info.salaryTempId,
          payslipId: info.id,
        }
      });
    },

    /**
     *@description 查看发放详情 
     */ 
    handleToDetails(info) {
      this.$router.push({
        name: 'electronicPayslipDetails',
        query: info,
      });
    },

    /**
     * @description 前往工资表页
     */
    handleToPayroll() {
      this.$router.push({
        path: '/salarySheet',
      });
    },
    handleRevoke(info) {
      this.$confirm('一旦撤销，所有已发放的工资条均会撤回, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.cancelIssuePayslip(info.id);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
  },
  activated() {
    this.searchDataList();
  }
};
</script> 
<style lang="less" scoped>
@import url("../less/common.less");

.nullTip {
  color: #999999;
  text-align: center;
  font-size: 14px;
  height: 80px;
  line-height: 80px;
}

.baseInfo {
  width: 220px;
  padding-right: 30px;

  .name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
  }

  .log {
    color: #666666;
    font-size: 12px;
  }
}

.btnList {
  width: 270px;
  padding: 0 20px;
  padding-left: 40px;
  display: flex;
  justify-content: space-between;

  .el-button {
    margin: 0;
  }
}

.statisticsInfo {
  padding: 0 30px;
  border: 1px solid #cbcbcb;
  border-top: none;
  border-bottom: none;
  flex: 1;
  font-size: 14px;

  // color: #666666;
  // min-width: 80px;
  p {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-right: 40px;

    span {
      &:first-child {
        margin-bottom: 8px;
        // font-weight: 600;
      }
    }
  }
}

.tip {
  text-align: center;
  margin: 20px 0;
}
</style>